<template>
  <div class="wrap">
    <div class="button-row">
      <el-button type="primary" @click="addDialog.showDialog = true"
        >新增键盘</el-button
      >
    </div>
    <el-dialog
      class="add-dialog"
      title="创建键盘"
      :visible.sync="addDialog.showDialog"
      width="50%"
    >
      <div class="row">
        <span class="desc">名称：</span>
        <el-input
          class="name-input"
          v-model="addDialog.name"
          placeholder="请输入轴体名称"
        ></el-input>
      </div>
      <div class="row">
        <span class="desc">配列：</span>
        <el-select
          class="type-option"
          v-model="addDialog.type"
          placeholder="请选择"
        >
          <el-option
            v-for="item in keyboardTypeList"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <div class="row">
        <el-checkbox
          v-model="addDialog.open"
          label="是否公开"
          border
        ></el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="addKeyboard">确 定</el-button>
      </span>
    </el-dialog>
    <div class="search-row">
      <el-input
        class="search-input"
        placeholder="请输入内容"
        v-model="searchWord"
        @change="refreshList"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="refreshList"
        ></el-button>
      </el-input>
      <span class="desc">键盘配列：</span>
      <el-select
        @clear="clearSearchType"
        @change="refreshList"
        v-model="searchType"
        placeholder="请选择"
        clearable
        change
      >
        <el-option
          v-for="item in keyboardTypeList"
          :key="item.code"
          :label="item.desc"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div>
    <el-table :data="keyboardList" style="width: 100%">
      <el-table-column label="序号" width="80" prop="index" />
      <el-table-column label="名称" width="180" prop="name" />
      <el-table-column label="配列" width="120" prop="type" />
      <el-table-column label="是否公开" width="80" prop="openDesc" />
      <el-table-column label="创建人" width="80" prop="userName" />
      <el-table-column label="创建时间" width="160" prop="createTime" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editKeyboard(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button type="success" size="mini" @click="viewKeyboard(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteKeyboard(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="pageSize"
      :total="totalPage"
      background
      layout="prev, pager, next"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  Button,
  Dialog,
  Input,
  Select,
  Option,
  Checkbox,
  Table,
  TableColumn,
  Pagination
} from "element-ui";

import {
  getAdminPlateTypeList,
  addAdminKeyboard,
  getAdminKeyboardInfo,
  deleteAdminKeyboard
} from "@/api/admin-keyboard.js";

export default {
  name: "keyboard",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [Select.name]: Select,
    [Option.name]: Option,
    [Checkbox.name]: Checkbox,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination
  },
  data() {
    return {
      keyboardTypeList: [],
      pageNum: 1,
      pageSize: 10,
      searchWord: null,
      searchType: null,
      keyboardList: [],
      totalPage: 1,
      addDialog: {
        showDialog: false,
        name: null,
        type: null,
        open: false
      }
    };
  },
  methods: {
    refreshList() {
      getAdminKeyboardInfo({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searchWord: this.searchWord,
        searchType: this.searchType
      })
        .then(res => {
          this.totalPage = res.total;
          res.list.forEach((item, index) => (item.index = index + 1));
          this.keyboardList = res.list;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    addKeyboard() {
      addAdminKeyboard({
        name: this.addDialog.name,
        type: this.addDialog.type,
        open: this.addDialog.open
      })
        .then(res => {
          this.refreshList();
          this.addDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    clearSearchType() {
      this.searchType = null;
      this.refreshList();
    },
    changePage(page) {
      this.pageNum = page;
      this.refreshList();
    },
    deleteKeyboard(index, row) {
      this.$confirm("永久删除此键盘, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteAdminKeyboard(row.id)
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg));
        })
        .catch(() => {});
    },
    editKeyboard(index, row){
      this.$router.push({path: `/backend/keyboard-edit/${row.id}`});
    },
    viewKeyboard(index, row){
      this.$router.push({path: `/backend/keyboard-view/${row.id}`});
    }
  },
  mounted() {
    this.refreshList();
    getAdminPlateTypeList()
      .then(res => {
        this.keyboardTypeList = res;
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .add-dialog {
    .row {
      margin-bottom: 4px;

      .desc {
        display: inline-block;
        width: 80px;
        font-weight: bold;
      }

      .name-input {
        width: 300px;
      }

      .type-option {
        width: 300px;
      }
    }
  }

  .search-row {
    margin-top: 5px;

    .search-input {
      width: 400px;
    }

    .desc {
      display: inline-block;
      margin-left: 5px;
      color: #444;
      font-weight: bold;
    }
  }
}
</style>